<template>
  <div class="page-container">
    <!-- 头部区域优化 -->
    <div class="header">
      <img src="/icon/bot2.gif" style="width: 70px; margin-right: 12px" />
      <div>
        <h1 style="color: #d811c3">你的智能AI助手</h1>
        <div class="subtitle">提升效率的智能解决方案</div>
      </div>
    </div>

    <div class="cards-container">
      <!-- 左侧卡片组 -->
      <div>
        <!-- 第一行 -->
        <div style="display: flex">
          <a-card hoverable class="feature-card" @click="click('chat')">
            <div class="card-content">
              <h3 style="display: flex; justify-content: space-between">
                {{ leftCards[0].title }}
                <component :is="leftCards[0].icon" class="icon-svg" />
              </h3>
              <p class="card-desc">{{ leftCards[0].description }}</p>
            </div>
          </a-card>
          <a-card
            hoverable
            class="feature-card"
            style="margin-left: 6px"
            @click="click(leftCards[1].type)"
          >
            <div class="card-content">
              <h3 style="display: flex; justify-content: space-between">
                {{ leftCards[1].title }}
                <component :is="leftCards[1].icon" class="icon-svg" />
              </h3>
              <p class="card-desc">{{ leftCards[1].description }}</p>
            </div>
          </a-card>
        </div>
        <!-- 第二行 -->
        <div style="display: flex">
          <a-card hoverable class="feature-card" @click="click(leftCards[2].type)">
            <div class="card-content">
              <h3 style="display: flex; justify-content: space-between">
                {{ leftCards[2].title }}
                <component :is="leftCards[2].icon" class="icon-svg" />
              </h3>
              <p class="card-desc">{{ leftCards[2].description }}</p>
            </div>
          </a-card>
          <a-card
            hoverable
            class="feature-card"
            style="margin-left: 6px"
            @click="click(leftCards[3].type)"
          >
            <div class="card-content">
              <h3 style="display: flex; justify-content: space-between">
                {{ leftCards[3].title }}
                <component :is="leftCards[3].icon" class="icon-svg" />
              </h3>
              <p class="card-desc">{{ leftCards[3].description }}</p>
            </div>
          </a-card>
        </div>
      </div>

      <!-- 右侧特色卡片 -->
      <div>
        <a-card
          hoverable
          class="feature-card main-feature"
          style="height: 290px; margin-left: 20px"
          @click="click('crud')"
        >
          <div class="card-content">
            <div class="card-icon highlight-icon" style="margin-bottom: 12px">
              <CodeOutlined class="icon-svg" />
            </div>
            <h3>代码生成器</h3>
            <p class="card-desc">一键生成Java的增删改查代码，简化开发流程，提高效率</p>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  CodeOutlined,
  CommentOutlined,
  SyncOutlined,
  TranslationOutlined
} from '@ant-design/icons-vue'
import { Card as ACard } from 'ant-design-vue'

const emit = defineEmits(['click'])

const click = (type) => {
  emit('click', type)
}

// 卡片数据
const leftCards = [
  {
    title: '智能问答',
    description: '接入多种主流大模型，满足各种需求',
    icon: CommentOutlined,
    color: '#f0f7ff'
  },
  {
    title: '代码模式',
    description: '更擅长处理复杂的代码问题',
    icon: CodeOutlined,
    color: '#f0f7ff',
    type: 'code'
  },
  {
    title: 'AI翻译',
    description: '提供文本智能翻译服务',
    icon: TranslationOutlined,
    color: '#f0f7ff',
    type: 'translation'
  },
  {
    title: '格式转换器',
    description: 'SQL、JSON、XML、YAML等智能转换',
    icon: SyncOutlined,
    color: '#f0f7ff',
    type: 'conversion'
  }
]
</script>

<style scoped>
/* 整体页面样式 */
.page-container {
  margin: 0 auto;
  padding: 6px 20px;
  background-color: #ffffff;
  overflow: auto;
  max-height: calc(100vh - 160px);
}

/* 头部优化样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 0 12px;
}

.logo {
  width: 70px;
  border-radius: 50%;
}

h1 {
  font-size: 36px;
  font-weight: 700;
  color: #1d2a40;
  margin: 0;
  line-height: 1.3;
  letter-spacing: 2px;
}

.subtitle {
  font-size: 16px;
  color: #6c757d;
  margin-top: 4px;
  font-weight: 500;
}

/* 卡片区域优化 */
.cards-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}

.feature-card {
  width: 300px;
  height: 140px;
  border-radius: 16px;
  border: 1px solid #e9ecef;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  margin-bottom: 12px;
  transition: all 0.3s ease;
  background: white;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(41, 112, 255, 0.15);
}

.main-feature {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white !important;
}

.main-feature .card-icon {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.main-feature h3,
.main-feature .card-desc {
  color: white !important;
}

.card-content {
}

.card-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-svg {
  font-size: 30px;
  color: #2970ff;
}

.main-feature .icon-svg {
  color: white;
}

h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1d2a40;
}

.card-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  h1 {
    font-size: 28px;
  }

  .subtitle {
    font-size: 16px;
  }

  .cards-container {
    margin-top: 0;
  }
}
</style>
